// 设定 当前页数 默认是 第一页
// let page = 1;

// 根据 浏览器地址栏参数 发送请求 
// 调用函数 输入 当前页数 参数 

// setPage() 中 调用的 ajax请求 
// 是 异步程序 会在所有的同步程序执行结束之后 才会执行
// 所有和 ajax异步请求结束之后需要执行的 和 ajax异步请求相关的操作
// 都要写在 函数中 


// 将需要执行的程序 定义在 加载事件中 确保html标签加载完毕再触发执行
$(function () {
    // 默认显示 第一页内容
    setPage(1);
})








// 使用 async 封装定义 函数 
async function setPage(page) {
    // 获取 浏览器地址栏数据参数 
    const urlObj = getUrlValObj();

    // 设定 每页显示的数据数量
    let line = 8;

    // 发送ajax请求 
    let res = await myPromiseAjax({
        url: '../server/goods_list.php',
        type: 'get',
        data: {
            cat_one_id: urlObj.cat_one_id,
            line: line,
            page: page,
        },
    });

    res = JSON.parse(res);
    console.log(res);

    // 根据数据 动态生成页面 
    let str = '';

    // 循环遍历 res.data 数组
    res.data.forEach(item => {
        str += `
          <li class="list-item">
            <div class="panel panel-primary">
              <div class="panel-body">
                <ol class="breadcrumb">
                  <li><a href="#">${item.cat_one_id}</a></li>
                  <li><a href="#">${item.cat_two_id}</a></li>
                  <li class="active">${item.cat_three_id}</li>
                </ol>
              </div>
              <div class="panel-footer">
                <div class="row">
                  <div class="">
                    <div class="thumbnail">
                      <img
                        src="${item.goods_big_logo}"
                        alt="...">
                      <div class="caption">
                        <h3>${item.goods_name}</h3>
                        <p>
                          <i class="glyphicon glyphicon-yen"></i>
                          <span>${item.goods_price}</span>
                        </p>
                        <p>
                          <a href="javascript:;" class="btn btn-primary" role="button">查找相似商品</a> 
                          <a href="./detail.html?goods_id=${item.goods_id}" class="btn btn-danger" role="button">查看商品详情</a>
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
          
          
          `;

        // 将 结果 写入 ul标签中
        $('.container ul').html(str);

    })


    $('[name="p"]').pagination({
        pageCount: res.sumPage,             //  总页数
        totalData: res.row,                  //  数据总数量
        current: page,                      //  当前第几页
        showData: res.line,                  //  每页数据数量
        prevCls: 'prev',                    //  上一页 class 类名
        nextCls: 'next',                    //  下一页 class 类名
        prevContent: '上一页',              //  上一页 内容
        nextContent: '下一页',              //  下一页 内容
        activeCls: 'active',                //  选中页 class 类名
        mode: 'fixed',                      //  分页器插件显示状态 fixed固定模式 unfixed不固定模式
        count: 4,                           //  除了选中页 其他分页按钮的个数 也就是 页数总按钮 是 设置的数值 + 1 
        coping: true,                       //  true开启首页末页  false关闭首页末页
        homePage: '首页',                   //  首页节点内容
        endPage: '末页',                    //  末页节点内容
        isHide: true,                       //  总页数为 0 或者 1 时 隐藏分页控件
        keepShowPN: false,                  //  是否一直显示 上一页 下一页 只有显示模式设定为 unfixed 才能执行
        jump: true,                         //  开启 跳转页
        callback: function (result) {        //  回调函数 点击分页器按钮 执行页面跳转触发 回调函数的形参存储 分页器按钮的数据信息

            //  再次调用函数 根据触发的分页器按钮页数 发送请求
            setPage(result.getCurrent());

        }
    });
}
